<template>
  <div class="home">
    <div class="home-left">
      患者信息
      <div class="left-content">
        <div class="info1">
          <div class="info-title">基本信息</div>
          <div class="basic-info-content">
            <div class="basic-info-item">
              <span>姓名: 张文清</span>
            </div>
            <div class="basic-info-item">
              <span>性别: 女</span>
            </div>
            <div class="basic-info-item">
              <span>年龄: 45岁</span>
            </div>
          </div>
        </div>
        <div class="info2">
          <div class="info-title">病历信息</div>
          <div class="medical-info-content">
            <div class="medical-info-item">
              <div class="label">住院科室:</div>
              <div class="value">心内科</div>
            </div>
            <div class="medical-info-item">
              <div class="label">入院日期:</div>
              <div class="value">2024-03-15</div>
            </div>
            <div class="medical-info-item">
              <div class="label">病历号:</div>
              <div class="value">2024031501</div>
            </div>
            <div class="medical-info-item">
              <div class="label">主诉:</div>
              <div class="value">反复胸闷、气短2个月，加重1周</div>
            </div>
            <div class="medical-info-item">
              <div class="label">现病史:</div>
              <div class="value">高血压病</div>
            </div>
            <div class="medical-info-item">
              <div class="label">临床诊断:</div>
              <div class="value">气促</div>
            </div>
            <div class="medical-info-item">
              <div class="label">入院诊断:</div>
              <div class="value">慢性阻塞性肺病伴有急性加重</div>
            </div>
          </div>
        </div>
        <div class="info3">
          <LeftInfo3 />
        </div>
      </div>
    </div>
    <div class="home-center">
      <div class="center-content">
        <video
          :key="centerContent.videoSrc"
          class="video-player"
          controls
          autoplay
          muted
          :src="centerContent.videoSrc"
        ></video>
      </div>
    </div>
    <div class="home-right">
      <div
        v-for="content in rightContents"
        :key="content.id"
        class="right-item content-box"
        @click="switchView(content.id)"
      >
        <h3>{{ content.title }}</h3>
        <video
          class="video-player1"
          controls
          autoplay
          muted
          :src="content.videoSrc"
        ></video>
      </div>
    </div>
    <div class="home-footer">
      <FooterContainer />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import LeftInfo3 from '../leftInfo3/LeftInfo3.vue';
import FooterContainer from '../footerContainer/FooterContainer.vue';
const contents = [
  { id: 'monitor', title: '心电监护仪' },
  { id: 'ecg', title: '心电图' },
  { id: 'ventilator', title: '呼吸机' },
  { id: 'video', title: '视频', videoSrc: require('@/assets/1.mp4') }
]

const centerContentId = ref('video');
const rightContentIds = ref(['monitor', 'ecg', 'ventilator']);


const centerContent = computed(() => {
  return contents.find(c => c.id === centerContentId.value);
});

const rightContents = computed(() => {
  return rightContentIds.value.map(id => contents.find(c => c.id === id));
});


// 交换视图位置
function switchView (clickedId) {
  const oldCenterId = centerContentId.value;
  const clickedIndex = rightContentIds.value.findIndex(id => id === clickedId);

  if (clickedIndex !== -1) {
    centerContentId.value = clickedId;
    rightContentIds.value.splice(clickedIndex, 1, oldCenterId);
  }
}
</script>

<style scoped src="./HelloWorld.css"></style>